<template>
  <div class="ActivityList">
    <!-- <van-nav-bar
      :title="pageTitle"
      left-arrow
      @click-left="backHome"
    />-->
    <nav-bar :title="'奖项申报'"></nav-bar>
    <div class="ActivityList-tab wrap">
      <van-tabs
        v-model="selectIndex"
        @click="tabsClick"
        sticky
        title-active-color="#0050A5"
        color="#0050A5"
      >
        <van-tab
          v-for="(tab, tabKey) in tabs"
          title-style="font-size:16x;"
          :key="tabKey"
          :title="tab.title"
        >
          <van-list
            v-model="tab.loading"
            :finished="tab.finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="shenbao-box">
              <div class="item-title">
                <div class="title">奖项名称</div>
                <div class="title">申报时间</div>
                <div class="title">申报状态</div>
              </div>
              <div class="list-item" v-for="(item,index) in tab.list" :key="index">
                <div class="item">{{item.title}}</div>
                <div class="item">{{item.applyDate}}</div>
                <div class="item" v-if="item.status==0">待审核</div>
                <div class="item" v-if="item.status==1">审核完成</div>
                <div class="item" v-if="item.status==2">审核失败</div>
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <!-- <div class="ActivityList">
      <van-divider :style="{ color: '#0050A5', borderColor: '#BFBFBF', padding: '0 16px' }">查看更多</van-divider>
    </div>-->
  </div>
</template>

<script>
import navBar from '@/components/NavBar'
export default {
  name: 'ActivityList',
  components: {
    navBar,
  },
  data() {
    return {
      swiper: [],
      imgUrl: config.imgUrl,
      pageTitle: '参加的活动',
      selectIndex: 0,
      loading: false,
      finished: false,
      tabs: [
        {
          title: '待审核',
          loading: false,
          finished: false,
          declareType: 0,
          list: [],
          status: 0,
          param: {
            page: 0,
            pageSize: 20,
            declareType: 0,
            status: 0,
          },
        },
        {
          title: '审核完成',
          loading: false,
          finished: false,
          list: [],
          declareType: 0,
          param: {
            page: 0,
            declareType: 0,
            pageSize: 20,
            status: 1,
          },
        },
        {
          title: '审核失败',
          loading: false,
          finished: false,
          list: [],
          declareType: 0,
          param: {
            page: 0,
            declareType: 0,
            pageSize: 20,
            status: 2,
          },
        },
      ],
    }
  },
  methods: {
    backHome() {
      this.$router.back()
    },
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
    onLoad() {
      this.findList()
    },
    tabsClick(index, title) {
      this.pageTitle = title
    },
    findList() {
      this.tabs[this.selectIndex].param.page++
      this.$request({
        url: '/award/selectMyAward',
        method: 'post',
        data: this.tabs[this.selectIndex].param,
      }).then((rsp) => {
        if (rsp.code === 200) {
          if (this.tabs[this.selectIndex].param.page === 1) {
            console.log(rsp.data.list, 'ww')
            this.tabs[this.selectIndex].list = rsp.data.list
          } else {
            this.tabs[this.selectIndex].list.splice(-1, 0, ...rsp.data.list)
          }

          this.tabs[this.selectIndex].loading = false
          if (this.tabs[this.selectIndex].list.length >= rsp.data.total) {
            this.tabs[this.selectIndex].finished = true
          } else {
            this.tabs[this.selectIndex].finished = false
          }
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
  mounted() {
    const type = this.$route.query.activityType
    this.selectIndex = type
    this.pageTitle = this.tabs[type].title
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';
.shenbao-box {
  text-align: center;
  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      width: 33%;
      color: #666666;
      font-size: px2rem(26);
    }
    height: px2rem(76);
    line-height: px2rem(76);
    &:nth-child(odd) {
      background: #f7f7f7;
    }
  }
  .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    margin-bottom: 30px;
    .title {
      width: 33%;
      font-size: px2rem(30);
      color: #303030;
    }
  }
}
</style>
